<template>
	<div class="app-container">
		<div class="bgWhite radius8 pb30 ">
			<div class="flex col-center row-between pb20 pt20 plr20 border-bottom">
				<span class="fb fs16">添加商品</span>
				<div>
					<el-button type="defaultBtn" @click="handleAdd">确认添加
					</el-button>
				</div>
			</div>
			<div class="radius8" style="margin: 20px;box-shadow: 0px 0px 10px  rgba(0, 0, 0, 0.05);">
				<div class="border-bottom pl30 pt20 pb20 flex col-center">
					<div class="plr20 cursor relative" 
					:class="{'activeLine main-color':tid == item.id}" v-for="(item,index) in tabArr" :key="index"
					@click="tabPanel(item)"
					>
						{{item.name}}
					</div>
				</div>
				<div class="flex col-top row-between  p20">
					<div class="bgWhite radius8" style="width: 280px;padding: 20px;">
						<div>商品类别</div>
						<div class="mt15">
							<el-tree :data="data" node-key="id" default-expand-all :expand-on-click-node="false"
								@node-click="handleNodeClick" :highlight-current="true">
								<template #default="{ node, data }">
									<div class="custom-tree-node flex col-center row-between">
										<span>{{ node.label }}</span>
										<!-- <span>
											<el-button type="text" size="mini" @click.stop="() => append(node,data)">
												新增
											</el-button>
											<el-button v-if="node.data.id != -1" type="text" size="mini" @click.stop="() => edit(node,data)">
												编辑
											</el-button>
											<el-button v-if="node.data.id != -1" type="text" size="mini" @click.stop="() => remove(node, data)">
												删除
											</el-button>
										</span> -->
									</div>
								</template>
							</el-tree>
						</div>
					</div>
					<div style="width: calc(100% - 300px);">
						<div class="flex col-center row-between mb20">
							<div>
								已选择<span class="main-color">{{ids.length}}</span>个商品
							</div>
							<div class="flex col-center">
								<span class="fs14 mr10">产品名称/编号</span>
								<el-input v-model="queryParams.keyword" placeholder="请输入" clearable class="resetInput"
									style="width: 200px;margin-right: 15px;" @keyup.enter="handleQuery" />
								<el-button type="defaultBtn" @click="handleQuery">搜索
								</el-button>
							</div>
						</div>
						<el-table v-loading="loading" :data="list" style="width: 100%" :header-row-style="{
					background: '#FAFAFA',
					color: '#0C1019',
					height: '54px',
				  }" :cell-style="{ height: '54px' }" @selection-change="handleSelectionChange">
							<el-table-column type="selection" width="55" align="center" :selectable="isSelect"/>
							<el-table-column label="主键" align="center" prop="id" v-if="false" />
							<!-- <el-table-column label="商品图片" align="center" prop="mainImageUrl" width="120">
								<template #default="scope">
									<img :src="scope.row.mainImageUrl" style="width: 100px; height: 100px" />
								</template>
							</el-table-column> -->
							<el-table-column label="商品名称" align="center" prop="commodityName" />
							<el-table-column label="商品编号" align="center" prop="commodityNumber"
								width="150" />
							<el-table-column label="标准单价" align="center" prop="caseUnitPrice" />
							<el-table-column label="产品规格" align="center" prop="caseQuantity" />
							<!-- <el-table-column label="启用状态" align="center" prop="status">
								<template v-slot="scope">
									<el-switch disabled v-model="scope.row.status" class="ml-2" inline-prompt active-text="启用"
										inactive-text="禁用" :loading="loading" />
								</template>
							</el-table-column> -->
							<el-table-column label="备注信息" align="center" prop="remark" />
						</el-table>

						<pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum"
							v-model:limit="queryParams.pageSize" @pagination="getList" />
					</div>
				</div>
			</div>
		</div>
		<!-- 编辑/新增分类树弹窗 -->
		<el-dialog :title="title" center v-model="treeFormOpen" width="385px" append-to-body>
		  <el-form ref="refTreeForm" :model="form" :rules="rules" label-width="80px">
		    <el-form-item label="名称:" prop="name">
		      <el-input
		          size="large"
		          v-model="form.name"
		          placeholder="请输入"
				  style="200px"
		      />
		    </el-form-item>
		  </el-form>
		  <div slot="footer" class="dialog-footer text-right mt30">
			  <el-button class="cancelSubBtn" @click="treeFormOpen = false">取 消</el-button>
			  <el-button type="primary" @click="treeDataSubmit" class="mainSubBtn">确 定</el-button>
		  </div>
		</el-dialog>
	</div>
</template>

<script setup name="ProductSetup">
	import {
		listClassify1, //商品分类树
		addTree,//商品分类树新增
		delTree,//商品分类树删除
		listGoods, //列表
		delProduct,
	} from "@/api/business/product";
	const {
		proxy
	} = getCurrentInstance();
	const {
		bus_channel, //销售渠道
		bus_toxicity,
		bus_sosage_form,
		bus_product_category,
		bus_active_ingredient_content
	} = proxy.useDict(
		"bus_channel",
		"bus_toxicity", "bus_sosage_form", "bus_product_category", "bus_active_ingredient_content");
</script>
<script>
	export default {
		data() {
			return {
				tid:1001,
				tabArr:[
					{
						id:1001,
						name:'正常品'
					},
					{
						id:1002,
						name:'试验品'
					},
					{
						id:1003,
						name:'促销品'
					}
				],
				loading: true, // 遮罩层
				ids: [], // 选中数组
				single: true, // 非单个禁用
				multiple: true, // 非多个禁用
				showSearch: true, //显示搜索条件
				total: 0, // 总条数
				list: [], // 产品表格数据
				title: '', // 弹出层标题
				open: false, // 是否显示弹出层
				queryParams: {
					pageNum: 1,
					pageSize: 10,
					keyword: '', // 产品名称 品牌名称 产品编码
					commodityType:'1001',//产品类型
					status:0,//启用
				}, //查询参数
				data: [],//分类树数据
				title: '新增', // 弹出层标题
				treeFormOpen:false,//新增弹窗
				rules: {
				  name: [{required: true, message: "请输入类别名称", trigger: "blur"}],
				},
				form:{
					name:'',
					parentId:'',//父id
					ancestors:'',//id链
					level:'',//层级
					id:''
				},
				selectList:[],//选中的商品
			}
		},
		created() {
			this.getTree(1)
		},
		methods: {
			isSelect(row, index) {
			  if (row.status == true ) {
				return true;
			  } 
			},
			handleNodeClick(e){
				if(e.id*1 != -1){
					this.queryParams.classifyId = e.id	
			    }else{
					this.queryParams.classifyId = ''
				}				
				this.getList();
			},
			resetAdd(){
				this.reset()
				this.treeFormOpen = true
			},
			reset(){
				this.form = {
					name:'',
					parentId:'',//父id
					ancestors:'',//id链
					level:'',//层级
					id:''
				}
			},
			append(node,data) {
				console.log(node,'level')
				this.reset()
				this.treeFormOpen = true
				if(node.data.id*1 != -1){
					this.form.parentId = node.data.id
				}
				this.form.ancestors = node.data.ancestors
				this.form.level = node.level
			},
			// 编辑
			edit(node,data){
				this.title = '编辑'
				this.reset()
				this.treeFormOpen = true
				this.form.parentId = node.data.id
				this.form.ancestors = node.data.ancestors
				this.form.name = node.data.name
				this.form.id = node.data.id
				this.form.level = node.level
			},
			remove(node, data) {
				console.log(node,'node')
				let that = this
				this.$modal
				  .confirm('是否确认删除' + node.data.label + '"的数据项？')
				  .then(function () {
				    delTree(node.data.id).then(res=>{
						if(res.code == 200){
							that.getTree()
							this.$modal.msgSuccess("删除成功");
						}
					})
				  })
				  .catch(() => { });
				
			},
			//分类树
			getTree(num) {
				listClassify1().then(res => {
					if (res.code == 200) {
						let arr = [{
							ancestors:'',
							id:'-1',
							name:'全部',
							parentId:''
						}]
						let dataArr = arr.concat(res.data)
						for (let key in dataArr) {
							dataArr[key].label = dataArr[key].name
						}
						this.data = this.handleTree(dataArr)
						console.log(dataArr,'this.data1')
						console.log(this.data,'this.data')
						if(num == 1){
							this.getList()
						}
					}
				})
			},
			// 分类树新增
			treeDataSubmit(){
				console.log(this.form,'form')
				addTree(this.form).then(res=>{
					if(res.code == 200){
						this.treeFormOpen = false
						this.getTree()
					}
				})
			},
			//查询商品列表
			getList() {
				this.loading = true;
				listGoods(this.queryParams).then((response) => {
					this.list = response.rows;
					for(let key in this.list){
						this.list[key].status = this.list[key].status == '0' ? true : false
					}
					this.total = response.total;
					this.loading = false;
				});
			},
			// 点击tab
			tabPanel(item){
				this.tid = item.id
				this.queryParams.commodityType = this.tid
				this.getList();
			},
			/** 搜索按钮操作 */
			handleQuery() {
				this.queryParams.pageNum = 1;
				this.getList();
			},
			/** 重置按钮操作 */
			resetQuery() {
				this.resetForm("queryForm");
				this.handleQuery();
			},
			//确认添加
			handleAdd() {
				if(this.ids.length == 0){
					this.$modal.msgError("请选择商品");
					return false;
				}
				localStorage.setItem('ids', JSON.stringify(this.ids));
				// 返回上一页
				this.$router.back();
			},
			// 多选框选中数据
			handleSelectionChange(selection) {
				this.selectList = selection
				console.log(this.selectList,'seleclist')
				this.ids = selection.map((item) => item.id);
				this.single = selection.length !== 1;
				this.multiple = !selection.length;
			},
		}
	}
</script>
<style>
	.activeLine::after{
		content: '';
		position: absolute;
		width: 32px;
		height: 2px;
		opacity: 1;
		background: rgba(77, 172, 177, 1);
		left: 28px;
		bottom: -20px;
	}
	.custom-tree-node{
		flex: 1;
	}
	.el-tree-node{
		margin: 6px 0;
	}
</style>